<template>
    <div>
        <div class="e-h-400" :id="id"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    props: {
        id: '',
        data: []
    },
    mounted() {
        var chartDom = document.getElementById(this.id);
        var myChart = echarts.init(chartDom);
        var option;

        //获取数据
        var indicator = []
        var seriesdata1 = []
        var seriesdata2 = []
        if(this.data && this.data.length > 0){
            this.data.forEach((item)=>{
                indicator.push({
                    name: item.name, 
                    max: 0
                })

                seriesdata1.push(item.brothercount)
                seriesdata2.push(item.storecount)
            })
        }

        // 获取最大值
        var max = 0
        seriesdata1.concat(seriesdata2).forEach((item,index)=>{
            if(index == 0){
                max = item
            }else{
                if(item > max){
                    max = item
                }
            }
        })
        indicator.forEach((item,index)=>{
            item.max = max
        })

        option = {
            title: {
                // text: 'Basic Radar Chart'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                data: ['中转站', '小哥'],
                left: 'center',
            },
            radar: {
                // shape: 'circle',
                indicator: indicator
            },
            series: [
                {
                    name: '中转站-小哥',
                    type: 'radar',
                    data: [
                        {
                            value: seriesdata2,
                            name: '中转站'
                        },
                        {
                            value: seriesdata1,
                            name: '小哥'
                        }
                    ]
                }
            ]
        };

        option && myChart.setOption(option);

    }
}
</script>

<style lang="scss" scoped>

</style>